ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
}

.finance-container {
  width: 100%;
  height: 100%;

  .dataScreen {
    background: #0d0e16;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    // transition: transform 0.3s;
    transform-origin: left top;

    .property-main {
      position: absolute;
      top: 110px;
      height: 90%;
      display: flex;
      width: 100%;
      padding: 17px 27px 17px;
      background: url("@/assets/screenImg/leaderImg/leaderBg.png") no-repeat;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      background-size: 100% 100%;

      .dataScreen-lf {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: url("@/assets/screenImg/commonImg/leftBg.png") no-repeat;
        background-size: 100% 100%;
        padding: 23px 0 23px 20px;

        .lf-top {
          width: 100%;
          height: 38%;
          background: url("@/assets/screenImg/medicalImg/leader-lf-top-bg.png") no-repeat;
          background-size: 100% 100%;
          padding: 34px 38px;

          .lf-top-item {
            display: flex;
            justify-content: space-between;
            height: calc(25% - 18px);
            align-items: center;
            margin-bottom: 18px;

            .lf-top-icon {
              width: 43px;
              height: 46px;
              background: url("@/assets/screenImg/medicalImg/leader-lf-top-icon.png") no-repeat;
              background-size: 100% 100%;
            }

            .lf-top-text {
              color: #fff;
              margin-left: 10px;
              margin-right: 15px;
              line-height: 21px;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-size: 14px;
            }

            .lf-top-unit, .lf-top-money {
              font-size: 12px;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 500;
              color: #fff;
              text-shadow: 0px 1px 5px #ffda3a;
            }

            .lf-top-money {
              font-size: 22px;
            }
          }

        }

        .lf-bottom {
          flex: 1;
          height: 100%;

          .statistics {
            height: 50%;
            display: flex;
            flex-direction: column;

            .revenueStatistics, .expendituresStatistics {
              width: 100%;
              flex: 1;
            }
          }


        }
      }

      .dataScreen-ct {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        .ct-top {
          .ct-top-incomeAndExpenses {
            display: flex;
            justify-content: space-between;
            align-items: center;


            .incomeAndExpenses {
              position: relative;
              width: 32%;
              height: 74px;
              background: url("@/assets/screenImg/medicalImg/money-bg.png") no-repeat;
              background-size: 100% 100%;
              padding: 13px 0 0 98px;

              &::before {
                content: '';
                position: absolute;
                top: 20px;
                left: 29px;
                width: 52px;
                height: 44px;
                background: url("@/assets/screenImg/medicalImg/money-icon.png") no-repeat;
                background-size: 100% 100%;
              }

              .title {
                width: 48px;
                height: 14px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .money {
                font-size: 30px;
                font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 42px;
                text-shadow: 0px 1px 7px #FFDA3A;

                .unit {
                  font-size: 14px;
                  color: #dee0e9;
                  text-shadow: none;
                }
              }
            }
          }

          .ct-top-passengerFlow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 24px;

            .passengerFlow {
              position: relative;
              width: 48%;
              height: 74px;
              background: url("@/assets/screenImg/medicalImg/money-bg.png") no-repeat;
              background-size: 100% 100%;
              padding: 13px 0 0 98px;

              &::before {
                content: '';
                position: absolute;
                top: 6px;
                left: 26px;
                width: 59px;
                height: 62px;
                background: url("@/assets/screenImg/medicalImg/people-icon.png") no-repeat;
                background-size: 100% 100%;
              }

              .title {
                width: 81px;
                height: 14px;
                margin-right: 7px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .rate {
                display: flex;
                font-size: 12px;
                font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                font-weight: 400;
                color: #10FF0E;
                line-height: 1;

                img {
                  width: 8px;
                  height: 8px;
                  margin-right: 2px;
                  vertical-align: top;
                }
              }

              .people-number {
                font-size: 26px;
                font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 35px;
                text-shadow: 0px 1px 7px #56CAFF;
                margin-top: 6px;

                img {
                  width: 13px;
                  height: 13px;
                  margin-left: 6px;
                }
              }
            }
          }
        }

        .ct-center {
          flex: 1;
          height: 30%;

          .ct-left, .ct-right {
            position: relative;
            width: 50%;
            height: 100%;

            .charts3D {
              width: 100%;
              height: 100%;
            }

            //.chartsBase{
            //  position: absolute;
            //  top: 52px;
            //  left: 27px;
            //  width: 185px;
            //  height: 90px;
            //  background: url("@/assets/screenImg/medicalImg/chartsBase.png") no-repeat;
            //  background-size: 100% 100%;
            //}
          }
        }

        .ct-bottom {
          height: 53%;
          background-color: skyblue;
        }
      }

      .dataScreen-rg {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30%;
        height: 100%;
        background: url("@/assets/screenImg/commonImg/rightBg.png") no-repeat;
        background-size: 100% 100%;

        .rg-top {
          display: flex;
          flex-direction: column;
          height: 50%;

          .laboratoryInspect {
            flex: 1;
          }
        }

        .rg-bottom {
          display: flex;
          flex-direction: column;
          flex: 1;

          .legends {
            position: absolute;
            display: flex;
            top: 0;
            left: 50%;
            transform: translateX(-50%);

            .legend {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 71px;
              height: 20px;
              background: url("@/assets/screenImg/medicalImg/legendBg.png") no-repeat;
              background-size: 100% 100%;

              .legendIcon, .legendIcon1 {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 5px;
                background-color: #28B4B4;
              }

              .legendIcon1 {
                background-color: #1978E5;
              }

              .legendText {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(216, 240, 255, 0.8);
                line-height: 16px;
              }
            }
          }


          .laboratoryRevenueStatistics {
            height: 100%;
          }
        }
      }
    }
  }
}
